<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5页面完整实现</title>
    <link rel="stylesheet" href="css/H5main.css">
</head>
<body>
    <div id="wrap">
        <header>
            <div id="content">
            <div id="logo">
                    <a href="javascript:;">
                            <img src="H5img/logo.png" alt="logo">
                    </a>
                </div>
                <div id="music">
                    <audio src="H5img/audio.mp3" loop></audio>
                    <a href="javascript:;">
                        <img src="H5img/musicoff.gif" alt="music">
                    </a>
                </div>
                <nav>
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;">
                                <img src="H5img/home.png" alt="home">
                            </a>
                            <a href="javascript:;">
                                <img src="H5img/home_gruen.png" alt="home_gruen">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">Course</a>
                            <a href="javascript:;">Course</a>
                        </li>
                        <li>
                            <a href="javascript:;">Works</a>
                            <a href="javascript:;">Works</a>
                        </li>
                        <li>
                            <a href="javascript:;">About</a>
                            <a href="javascript:;">About</a>
                        </li>
                        <li>
                            <a href="javascript:;">Team</a>
                            <a href="javascript:;">Team</a>
                        </li>
                    </ul>
                </nav>
                <div id="point"></div>
            </div>
        </header>
        <section>
            <ul class="mainframe">
                <li id="first" class="frame">
                    <div class="wrap commonTitle">
                        <div><span>one layer</span></div>
                        <div><span>two layer</span></div>
                        <div><span>three layer</span></div>
                        <div><span>four layer</span></div>
                        <div class="pointer">
                                <ul>
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                    </div>
                </li>
                <li id="second" class="frame">
                    <div class="wrap">
                        <div class="plane1"></div>
                        <div class="plane2"></div>
                        <div class="plane3"></div>
                        <header>
                            <p class="commonTitle">EINIGE</p>
                            <p class="commonTitle">UNSERER</p>
                            <p class="commonTitle">KUNDEN</p>
                        </header>
                        <article>
                            <p class="commonText">Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann. </p>
                            <p class="commonText">Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal. </p>
                        </article>
                        <div class="content">
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="line"></div>
                            <div class="imgItem">
                                <img src="H5img/binoli.png" alt="binoli">
                                <span>aaa</span>
                            </div>
                            <div class="imgItem">
                                <img src="H5img/binoli.png" alt="binoli">
                                <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/bks.png" alt="bks">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/gu.png" alt="gu">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/hlx.png" alt="hlx">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/lbs.png" alt="lbs">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/leonberg.png" alt="leonberg">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/pcwelt.png" alt="pcwelt">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/tata.png" alt="tata">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/bks.png" alt="bks">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/bks.png" alt="bks">
                                    <span></span>
                            </div>
                            <div class="imgItem">
                                    <img src="H5img/bks.png" alt="bks">
                                    <span></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li id="third" class="frame">
                    <div class="wrap">
                        <div class="pencel1"></div>
                        <div class="pencel2"></div>
                        <div class="pencel3"></div>
                        <header>
                            <p class="commonTitle">EINBLICK</p>
                            <p class="commonTitle">ERKENNTNIS</p>
                            <p class="commonTitle">ERGEBNIS</p>
                        </header>
                        <img id="robot" src="H5img/robot.png" alt="robot">
                        <div class="pannel">
                            <div class="wrap">
                                <img src="H5img/worksimg1.jpg" alt="worksimg1">
                                <div class="mask">
                                    <div class="img"></div>
                                </div>
                            </div>
                            <div class="wrap">
                                <img src="H5img/worksimg2.jpg" alt="worksimg2">
                                <div class="mask">
                                    <div class="img"></div>
                                </div>
                            </div>
                            <div class="wrap">
                                <img src="H5img/worksimg3.jpg" alt="worksimg3">
                                <div class="mask">
                                    <div class="img"></div>
                                </div>
                            </div>
                            <div class="wrap">
                                <img src="H5img/worksimg4.jpg" alt="worksimg4">
                                <div class="mask">
                                    <div class="img"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li id="forth" class="frame">
                    <div class="wrap">
                        <header>
                            <p class="commonTitle">DIE</p>
                            <p class="commonTitle">SPEZIELLE</p>
                            <p class="commonTitle">VIELFALT</p>
                        </header>
                        <article>
                            <p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
                        </article>
                        <img src="H5img/greenLine.png" alt="greenLine">
                        <div class="album">
                            <img src="H5img/about2.jpg" alt="about2">
                            <div class="wrap">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                        <div class="album">
                            <img src="H5img/about4.jpg" alt="about4">
                            <div class="wrap">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                        
                    </div>
                </li>
                <li id="fiveth" class="frame">
                    <div class="wrap">
                            <header>
                                <p class="commonTitle">WIR SIND</p>
                                <p class="commonTitle">VOXELAIR</p>
                            </header>
                            <article>
                                <p class="commonText">Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe. </p>
                                <p class="commonText">Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.</p>
                            </article>
                            <div id="member">
                                <ul class="clearfix">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <canvas width="118px" height="448px"></canvas>
                            </div>
                    </div>
                </li>
            </ul>
            <ul class="point">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </div>
    <div id="enterAni">
        <div id="up"></div>
        <div class="line"></div>
        <div id="down"></div>
    </div>
</body>
<script>
    window.onload= function(){
        //开场动画元素
        var enter_ani = document.querySelector('#enterAni')
        //header中的元素
        var nav__lis = document.querySelectorAll('#wrap>header nav>ul>li')
        var header_point = document.querySelector('#wrap>header #point')
        var music = document.querySelector('#wrap>header #music>audio')
        //主界面的元素
        var section = document.querySelector('#wrap>section')
        var max_index__lis = document.querySelectorAll('#wrap>section>.point>li')
        var mainframe__lis = document.querySelectorAll('#wrap .mainframe>li')
        var layers = document.querySelectorAll('#wrap .mainframe .wrap div')
        var pointer__lis = document.querySelectorAll('#wrap .mainframe #first .wrap .pointer li')
        var canvas = document.querySelector('#wrap .mainframe #fiveth canvas')
        //第一屏元素
        var first_screen_layer_wrap = document.querySelector('#wrap>section #first>.wrap')
        //第二屏元素
        var plane1 = document.querySelector('#wrap .mainframe #second>.wrap>.plane1')
        var plane2 = document.querySelector('#wrap .mainframe #second>.wrap>.plane2')
        var plane3 = document.querySelector('#wrap .mainframe #second>.wrap>.plane3')
        //第三屏元素
        var pencil1 = document.querySelector('#wrap .mainframe #third>.wrap>.pencel1')
        var pencil2 = document.querySelector('#wrap .mainframe #third>.wrap>.pencel2')
        var pencil3 = document.querySelector('#wrap .mainframe #third>.wrap>.pencel3')
        //第四屏元素
        var forth_screen_album = document.querySelectorAll('#wrap>section #forth .album')
        //第五屏元素
        var fiveth_screen_header = document.querySelector('#wrap>section #fiveth header')
        var fiveth_screen__lis = document.querySelectorAll('#wrap>section #fiveth #member li')
        var ct = canvas.getContext('2d')
        var first_timer = null
        var second_timer = null
        var bubble_arr = []
        //其他元素
        var FirstScreenTimer = null
        var navTimer = null
        var first_screen_old_index = 0
        var first_screen_new_index = 0
        var LAYER_NUMBER = 4
        var screen_height = document.documentElement.clientHeight - 80
        var current_screen = 0
        var SCREEN_NUMBER = 5
        //出入场动画
        var enter_leave_ani_arr = [{
            in: function(){
                first_screen_layer_wrap.style.transform = 'translateY(0px)'
                first_screen_layer_wrap.style.opacity = '1'
            },
            out: function(){
                first_screen_layer_wrap.style.transform = 'translateY(-1200px)'
                first_screen_layer_wrap.style.opacity = '0'
            }
        },
        {
            in: function(){
                plane1.style.transform = 'translate(0px,0px)'
                plane2.style.transform = 'translate(0px,0px)'
                plane3.style.transform = 'translate(0px,0px)'
            },
            out: function(){
                plane1.style.transform = 'translate(-200px,-200px)'
                plane2.style.transform = 'translate(-200px,200px)'
                plane3.style.transform = 'translate(200px,-200px)'
            }
        },
        {
            in: function(){
                pencil1.style.transform = 'translateY(0px)'
                pencil2.style.transform = 'translateY(0px)'
                pencil3.style.transform = 'translateY(0px)'
            },
            out: function(){
                pencil1.style.transform = 'translateY(-200px)'
                pencil2.style.transform = 'translateY(200px)'
                pencil3.style.transform = 'translateY(200px)'
            }
        },
        {
            in: function(){
                forth_screen_album[0].style.transform = 'rotateZ(0deg)'
                forth_screen_album[1].style.transform = 'rotateZ(0deg)'
            },
            out: function(){
                forth_screen_album[0].style.transform = 'rotateZ(50deg)'
                forth_screen_album[1].style.transform = 'rotateZ(50deg)'
            }
        },
        {
            in: function(){
                fiveth_screen_header.style.transform = "translateX(0px)"
                fiveth_screen_header.nextElementSibling.style.transform = "translateX(0px)"
            },
            out: function(){
                fiveth_screen_header.style.transform = "translateX(-200px)"
                fiveth_screen_header.nextElementSibling.style.transform = "translateX(200px)"
            }
        }]
        reponsive()
        deleteEnterAniNode()
        mainIndex()
        setMusicPlayer()
        setIndexByscroll()
        setIndexByNav()
        setFirstScreenInterval()
        setFirstScreenSlide()
        addBubbleAni()
        //设置页面响应式
        function reponsive(){
            mainframeLisResize()
            window.onresize = function(){
                mainframeLisResize()
            }
            function mainframeLisResize(){
                for(var i=0; i<mainframe__lis.length; i++){
                    screen_height = document.documentElement.clientHeight - 80
                    mainframe__lis[i].style.height = screen_height + 'px'
                }
            }
        }
        //删除开场动画节点
        function deleteEnterAniNode(){
            enter_ani.children[0].addEventListener('animationend', function(){
                resize(current_screen)
                music.play()
                music.nextElementSibling.children[0].src='H5img/musicon.gif'
                enter_ani.remove()
            })
        }
        //设置主索引
        function mainIndex(){
            for(var i=0; i<max_index__lis.length; i++){
                (function(i){
                    max_index__lis[i].onclick = function(){
                        setIndex(i)
                    }
                })(i)
            }
        }
        //样式初始化
        function resize(num){
            setIndex(num)
        }
        // 设置音乐播放
        function setMusicPlayer(){
                music.nextElementSibling.onclick = function(){
                if(music.paused){
                    music.play()
                    this.children[0].src='H5img/musicon.gif'
                }else{
                    music.pause()
                    this.children[0].src='H5img/musicoff.gif'
                }
                return false;
            }
        }
        
        //设置页面切换屏
        //点击导航切换
        function setIndexByNav(){
            for(var i=0; i<nav__lis.length; i++){
                (function(i){
                    nav__lis[i].onclick = function(){
                        
                        setIndex(i)
                    }
                })(i)
            }
        }
        //滑动滚轮切换
        function setIndexByscroll(){
            document.onmousewheel = scrollEvent
            document.addEventListener('DOMmousescroll', scrollEvent)
            function scrollEvent(e){
                e = e||event
                var is_up = e.wheelDelta>0||e.detail<0
                if(navTimer!=null){
                    return false
                }
                if(!is_up){
                    current_screen >= SCREEN_NUMBER-1 ? current_screen : setIndex(current_screen+1)
                    
                }else{
                    current_screen <= 0 ? current_screen : setIndex(current_screen-1)
                    
                }
                navTimer = setTimeout(function(){
                    navTimer = null
                },1000)
            }
        }
        //基本切换函数
        function setIndex(num){
            section.style.top = -num*screen_height+'px'
            nav__lis[current_screen].children[1].classList.remove('active')
            max_index__lis[current_screen].classList.remove('active')
            enter_leave_ani_arr[current_screen].out()
            nav__lis[num].children[1].classList.add('active')
            max_index__lis[num].classList.add('active')
            enter_leave_ani_arr[num].in()
            current_screen = num
            header_point.style.left = nav__lis[num].offsetLeft + nav__lis[num].offsetWidth/2 + 'px'
        }
        //第一屏
        //点击滑动
        function setFirstScreenSlide(){
            for(var i=0; i<pointer__lis.length; i++){
                (function(i){
                    pointer__lis[i].onclick = function(){
                        setFirstScreenInterval()
                        first_screen_new_index = i
                        var is_gl = (first_screen_new_index>first_screen_old_index)
                        pointer__lis[first_screen_old_index].classList.remove('active')
                        setSlideAnimation(first_screen_old_index, is_gl? 'leftHide': 'rightHide')
                        setSlideAnimation(first_screen_new_index, is_gl? 'rightShow': 'leftShow')
                        pointer__lis[first_screen_new_index].classList.add('active')
                        first_screen_old_index = first_screen_new_index
                    }
                })(i)
            }
        }
        //抽象滑动动画
        function setSlideAnimation(index, dirc){
            layers[index].classList.remove('rightHide')
            layers[index].classList.remove('leftHide')
            layers[index].classList.remove('rightShow')
            layers[index].classList.remove('leftShow')
            layers[index].classList.add(dirc)
        }
        //滑动动画定时器
        function setFirstScreenInterval(){
            clearInterval(FirstScreenTimer)
            FirstScreenTimer = setInterval(function(){
                first_screen_new_index++
                first_screen_new_index %= LAYER_NUMBER
                pointer__lis[first_screen_old_index].classList.remove('active')
                setSlideAnimation(first_screen_old_index, 'leftHide')
                setSlideAnimation(first_screen_new_index, 'rightShow')
                pointer__lis[first_screen_new_index].classList.add('active')
                first_screen_old_index = first_screen_new_index
            },2000)
        }
        //添加气泡动画
        function addBubbleAni(){
            for(var i=0; i<fiveth_screen__lis.length; i++){
                (function(i){
                    fiveth_screen__lis[i].onmouseenter = function(){
                    for(var j=0; j<fiveth_screen__lis.length; j++){
                        fiveth_screen__lis[j].style.opacity = '0.3'
                    }
                    canvas.style.left = fiveth_screen__lis[i].offsetLeft + 'px'
                    canvas.style.display = 'block'
                    fiveth_screen__lis[i].style.opacity = '1'
                    drawBubble()
                    }
                })(i)
            }
            fiveth_screen__lis[0].parentElement.parentElement.onmouseleave = function(){
                clearInterval(second_timer)
                clearInterval(first_timer)
                bubble_arr = []
                for(var j=0; j<fiveth_screen__lis.length; j++){
                    fiveth_screen__lis[j].style.opacity = '1'
                }
                canvas.style.display = 'none'
            }
        }
        //canvas气泡动画
        function drawBubble(){
            var X_LIMITED = 118
            var Y_LIMITED = 200
            var R_LIMITED = 10
            var Y_STEP = 1
            var X_STEP = 7
            var Y_HEIGHT = 100
            addBubble()
            readBubbleArr()
            function readBubbleArr(){
                clearInterval(second_timer)
                second_timer = setInterval(function(){
                    for(var i=0; i<bubble_arr.length; i++){
                        if(bubble_arr[i].y >= Y_HEIGHT){
                            bubble_arr[i].y -= Y_STEP
                            bubble_arr[i].arc += X_STEP 
                            bubble_arr[i].arc%=360
                            bubble_arr[i].x = canvas.width*Math.sin(bubble_arr[i].arc*Math.PI/180)
                            bubble_arr[i].r+=0.03;
                            bubble_arr[i].opacity-=0.001;
                        }else{
                            bubble_arr.splice(i, 1)
                        }
                    }
                    ct.clearRect(0, 0, canvas.width, canvas.height)
                    for(var i=0; i<bubble_arr.length; i++){
                        ct.save()
                        ct.fillStyle = 'rgba('+bubble_arr[i].red+', '+bubble_arr[i].green+', '+bubble_arr[i].yello+', '+bubble_arr[i].opacity+')'
                        ct.beginPath()
                        ct.arc(bubble_arr[i].x, bubble_arr[i].y, bubble_arr[i].r, 0, 2*Math.PI)
                        ct.fill()
                        ct.restore()
                    }
                }, 1000/60)
            }
            function addBubble(){
                clearInterval(first_timer)
                first_timer = setInterval(function(){
                    bubble_arr.push({
                        x: X_LIMITED*Math.random(),
                        y: 480-Y_LIMITED*Math.random(),
                        r: R_LIMITED*Math.random(),
                        red: 255*Math.random(),
                        green: 255*Math.random(),
                        yello: 255*Math.random(),
                        opacity: 1,
                        arc: 360*Math.random()
                    })
                }, 100)
            }
            
        }
    }
</script>
</html>